<!-- 首页-我的待办 组件-->
<template>
  <view class="waybill_contain">
    <view class="title"><span class="tit">我的待办</span><span class="total">{{ total }}</span></view>
    <scroll-view @scrolltolower="handleScroll" scroll-y="true" style="height: 80vh;">
      <view v-for="(item, index) in formList" :key="index" class="box">
        <Item :item="item"  @cancel="reload"  class="item" />
      </view>
    </scroll-view>
  </view>
</template>
  
<script setup lang='ts'>
import { ref } from "vue";
import { OrderListType } from '@/type/index'
import { getMyPending } from "@/@api/home";

import Item from '@/components/pendItem/item.vue'
import { useDidShow } from "@tarojs/taro";
import useUserInfoStore from "@/store/user";
const userStore = useUserInfoStore()

console.log(userStore, 'userStore')

const loading = ref(false)
const formList = ref<OrderListType[]>([])
const params = ref({
  pageNum: 1,
  pageSize: 15,
});
const total = ref(0)

useDidShow(() => {
  params.value.pageNum = 1;
  formList.value = [];
  initList();
});

// 刷新列表
function reload() {
  params.value.pageNum = 1;
    formList.value = [];
    initList()
}


function handleScroll() {
  if (!loading.value) {
    params.value.pageNum++;
    initList();
  }
}

// 初始化列表
async function initList() {
  const res = await getMyPending(params.value)
  // console.log(JSON.parse(JSON.stringify(res.data.rows)), '我的待办数据');
  if (res.data.code == 200) {
    formList.value = setStatusVal([...formList.value, ...res.data.rows])
    total.value = res.data.total;
    if (formList.value.length >= res.data.total) {
      loading.value = true;
    }
  }
}


// 添加状态标签
function setStatusVal(obj: OrderListType[]): OrderListType[] {
  let arr = obj.map((item: OrderListType) => {
    return {
      ...item,
      statusVal: '待确认'
    }
  })
  return arr
}


</script>
  
<style lang="scss">
.waybill_contain {
  width: 100vw;
  overflow: hidden;

  .box {
    overflow: auto;
    padding: 0 24rpx;
    box-sizing: border-box;
    background-color: #efeff4;
  }
}

.title {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 24rpx;


  .tit {
    font-size: 32rpx;
    color: #252525;
    font-weight: bold;
    margin-right: 8rpx;
  }

  .total {
    display: inline-block;
    padding: 4rpx 12rpx;
    border-radius: 70rpx;
    background: #FA5151;
    color: #fff;
    text-align: center;
    font-size: 20rpx;
  }
}
</style>